<template>
  <div class="message">

  </div>
</template>

<script>
import {queryUnreadMsg} from "@/api/feedback";

export default {
  data() {
    return {
      message: '',
      feedbackTime: '',
      feedbackType: '',
      userName: '',
      feedbackContent: ''
    }
  },
  mounted() {
    this.queryMsg();
  },
  methods: {
    ellipsis() {
      let len = this.feedbackContent.length;
      if (len > 30) {
        return this.feedbackContent.slice(0, 30) + "...";
      }
      return this.feedbackContent;
    },
    async queryMsg() {
      await queryUnreadMsg().then(res => {
        let list = res.data;
        for (let i = 0; i < list.length; i++) {
          this.userName = list[i].userName;
          this.feedbackTime = list[i].feedbackTime;
          this.feedbackContent = list[i].feedbackContent;
          let feedbackType = list[i].feedbackType;
          this.feedbackType = feedbackType === 1 ? '系统问题' : (feedbackType === 2 ? '内容问题' : '我要吐槽');
          this.msgTip()
        }
      });

    },
    msgTip() {
      this.$notify({
        title: '用户反馈——' + this.feedbackType,
        dangerouslyUseHTMLString: true,
        message: `<div>
            <span>${this.feedbackTime}</span>
            <br>
            <span>反馈人：${this.userName}</span>
            <div title="${this.feedbackContent}">反馈内容：${this.ellipsis()}</div>
        </div>`,
        duration: 0
      });
    },

  }
};
</script>


<style scoped>
.ellipsis {
  width: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}


</style>